<div data-role="view" data-title="Maybanhang.Net" id="customer-list" data-layout="mobile-view" data-init="initCustomerList">
    <header data-role="header">
        <div data-role="navbar">
            <a id="back-button" class="nav-button" data-align="left" data-role="backbutton">Back</a>
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" href='#index'>Home</a>            
        </div>
    </header>    
    <ul data-role="listview" data-style="inset" data-type="group">
        <li>            
            <ul id='list-customer'>                
                
            </ul>
        </li>        
    </ul>
    <footer data-role="footer">
    	<div class="search-container">         	
         	<div style="height: 2px;"></div>
            <input type="text" class="search-text" placeholder="Tìm kiếm khách hàng" id="customer_text_search"/>
            <a data-role="button" data-icon="search" data-click="customerSearch"></a>
            <a data-role="button" data-icon="history" data-click="resetCustomerSearch" id="customer_reset_search"></a>
        </div>
    </footer>
    <script id="list-customer-item-template" type="text/x-kendo-template">    	
		<a href='site/customerDetail?id=#= customerId #'>
        	<div style="margin: 4px;">
		        <img class="product-list-image" src="site/customerImage/#= customerId #" /><span class="product-list-name">#= customerFullName #
		        <div class="metadata">
		            <span class="product-list-category">#= categoryName #</span>		            
		        </div>
		        <div>
		        	<span style="display: block">#= mobile #&nbsp;</span>
		        </div>
	        </div>
        </a>
  	    
	</script>
    <script>
    	function customerSearch()
    	{
    		var text = $.trim($("#customer_text_search").val());
    		 if (text !="")
    		 {    		 	
    		 	//$("#product_reset_search").show();
    		 }
    		 initCustomerList();
    	}
    	function resetCustomerSearch()
    	{
    		 var text = $.trim($("#customer_text_search").val());
    		 if (text !="")
    		 {
    		 	$("#customer_text_search").val("");
    		 	//$("#product_reset_search").hide();
    		 	initCustomerList();
    		 	
    		 }
    	}
    	function initCustomerList()
    	{
    		app.showLoading();
    		pageNumber = 0;
    		
    		var dataSource = new kendo.data.DataSource({
                serverPaging: true,
                pageSize: 20,
                transport: {
                    read: {
                        url: "service/customer", 
                        dataType: "json" 
                    },
                    parameterMap: function(options) {
	                    options = {	                        
	                        size: options.pageSize
	                    };
	                    if (paged) {	                        
	                         paged = false;
	                    }
	                    else
	                    {
	                    	pageNumber = 0;
	                    	
	                    }
	                    options["page"] = pageNumber;
	                    options["keyword"] = $("#customer_text_search").val();
	                    return options;
	                }
                },
                schema: { // describe the result format
                    parse: function(response) {
	                    pageNumber = pageNumber +1;
                   		app.hideLoading();
	                    return response;
	                },
                    // the data which the data source will be bound to is in the "results" field
                    data: function(data) {
                    	
                        return data || [];
                    },
                    total: function() { return 100000 }
                }
            });
			paged = false;
	        $("#list-customer").kendoMobileListView({
	            dataSource: dataSource,
	            pullToRefresh: true,
	            appendOnRefresh: false,
	            endlessScroll: true,
	            endlessScrollParameters: function() {	            	
	                paged = true;
	            },
	            template: $("#list-customer-item-template").text()
	        });
    	}
    </script>
</div>